import React from 'react'
import { Col, Form, Input, Modal, Row, Radio, Button, InputNumber } from 'antd'
import { Loader } from 'components'
import styles from './List.less'

const FormItem = Form.Item
const EditModal = ({
  dispatch,
  form: {
    getFieldDecorator,
    validateFields,
    setFieldsValue,
  },
  visible,
  item,
  levels,
  effects
}) => {

  const hideEditModal = (flag, currentItem) => {
    dispatch({
      type: 'distributorList/toggleModal',
      currentItem,
      field: 'editVisible',
      flag
    })
  }

  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 12, offset: 0},
      sm: {span: 12, offset: 0},
    }
  }

  const confirmEditModal = () => {
    validateFields((err, values) => {
      if (!err) {
        let params = {
          distributorDisplayName: values.displayName,
          transferToBalanceStatus: values.transferToBalanceStatus == '1' ? true : false,
          enabled: values.enabled == '1' ? true : false,
          score: (values.score != null) ? parseInt(values.score) : null,
          version: item.version,
          id: item.id
        }
        dispatch({
          type: 'distributorList/editDistributor',
          params: params
        })
      }
    })
  }

  return (
    <Modal 
      visible={visible} 
      width={400} 
      title={"编辑门店"} 
      className={styles.distributorDetailModal} 
      onCancel={() => { hideEditModal(false, {}) }}
      footer={[
        <Button key="back" onClick={() => { hideEditModal(false, {}) }}>关闭</Button>,
        <Button key="submit" type="primary" onClick={() => { confirmEditModal() }}>确定</Button>
      ]}>
      {
        visible
        ? (<Form>
          <Row>
            <Col span={24}>
              <FormItem {...formItemLayout} label="店铺名称">
                {getFieldDecorator('displayName', {
                  rules: [
                    {required: true, message: '请填写店铺名称!'},
                    {max: 30, message: '最多不超过30个字符'}
                  ],
                  initialValue: item.displayName ? item.displayName : ''
                })(<Input/>)}
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem {...formItemLayout} label="是否允许提现">
                {getFieldDecorator('transferToBalanceStatus', {
                  initialValue: item.transferToBalanceStatus ? '1' : '0'
                })(
                  <Radio.Group>
                    <Radio value="1">是</Radio>
                    <Radio value="0">否</Radio>
                  </Radio.Group>
                )}
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem {...formItemLayout} label="是否禁用">
                {getFieldDecorator('enabled', {
                  initialValue: item.enabled ? '1' : '0'
                })(
                  <Radio.Group>
                    <Radio value="0">是</Radio>
                    <Radio value="1">否</Radio>
                  </Radio.Group>
                )}
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem {...formItemLayout} label="门店积分">
                {getFieldDecorator('score', {
                  initialValue: item.levelInfo ? item.levelInfo.score : ''
                })(<InputNumber precision={0} step={1} min={0} max={9999999}/>)}
              </FormItem>
            </Col>
          </Row>
          {
            levels && levels.length > 0
            ? (
              <div className={styles.tip}> 
                积分规则：
                <span>
                {
                  levels.map((val, index) => {
                    return (<span key={index}>{val.name}：{val.minScore}~{(index+1) == levels.length ? '以上' : val.maxScore+'分'}；</span>)
                  })
                }
                </span>
              </div>
            )
            : null
          }
        </Form>)
        : null
      }
      <Loader spinning={effects['distributorList/queryDistributorDetail']} />
      <Loader spinning={effects['distributorList/queryDistributorLevels']} />
      <Loader spinning={effects['distributorList/editDistributor']} />
    </Modal>
  )

}

export default Form.create()(EditModal)